<template>
  <div
    ref="radar"
    class="radar"
  >
  </div>
</template>

<script>
export default {
  name: 'Radar',
  props: {
    'max': {
      type: Number
    },
    'data': {
      type: Array
    }
  },
  data () {
    return {
      itemStyle: ['rgba(49, 91, 150, 1)', 'rgba(83, 233, 200, 1)', 'rgba(255, 233, 143, 1)', 'rgba(49, 91, 150, 1)', 'rgba(49, 91, 150, 1)', 'rgba(83, 233, 200, 1)', 'rgba(255, 233, 143, 1)', 'rgba(49, 91, 150, 1)', 'rgba(49, 91, 150, 1)', 'rgba(83, 233, 200, 1)', 'rgba(255, 233, 143, 1)', 'rgba(49, 91, 150, 1)'],
      areaStyle: ['rgba(255, 109, 255, .3)', 'rgba(83, 233, 255, .3)', 'rgba(255, 233, 255, .3)', 'rgba(49, 91, 255, .3)', 'rgba(255, 109, 255, .3)', 'rgba(83, 233, 255, .3)', 'rgba(255, 233, 255, .3)', 'rgba(49, 91, 255, .3)', 'rgba(255, 109, 255, .3)', 'rgba(83, 233, 255, .3)', 'rgba(255, 233, 255, .3)', 'rgba(49, 91, 255, .3)']
    }
  },
  computed: {
    series () {
      const arr = []
      for (let i = 0, len = this.data.length; i < len; i++) {
        arr.push({
          value: this.data[i].value,
          name: this.data[i].name,
          itemStyle: {
            normal: {
              borderColor: this.itemStyle[i],
              borderWidth: 3,
              opacity: 0.5
            }
          },
          areaStyle: {
            normal: {
              color: this.areaStyle[i]
            }
          }
        })
      }
      return arr
    },
    legendData () {
      const arr = []
      for (let i = 0, len = this.data.length; i < len; i++) {
        arr.push(this.data[i].name)
      }
      return arr
    }
  },
  watch: {
    series () {
      this.draw()
    }
  },
  mounted () {
    this.draw()
    this.$common.winResize(this.$echarts.init(this.$refs.radar))
  },
  methods: {
    draw () {
      const $radar = this.$echarts.init(this.$refs.radar)
      const option = {
        tooltip: {
          backgroundColor: 'rgba(7, 23, 71, .8)',
          padding: 10,
          borderColor: '#2c76c0',
          borderWidth: 1,
          textStyle: {
            color: '#45beed'
          }
        },
        color: ['#ff6dff', '#53e9ee', '#ffe98f', '#315bff'],
        legend: {
          icon: 'path://M837.248 670.656V360.512a100.8 100.8 0 0 0-34.176-195.52c-45.312 0-83.2 30.144-95.872 71.36H317.248a100.416 100.416 0 0 0-96-71.36A100.864 100.864 0 0 0 181.12 358.4v314.368a100.8 100.8 0 0 0 40.128 193.408 100.48 100.48 0 0 0 96.704-73.664h388.544a100.48 100.48 0 0 0 197.44-27.264c0-43.712-27.84-80.512-66.688-94.592z m-608.128-5.44V366.08a100.48 100.48 0 0 0 91.2-81.728h383.936a100.352 100.352 0 0 0 85.056 81.088v300.288a100.608 100.608 0 0 0-84.736 78.784H320a100.48 100.48 0 0 0-90.88-79.296z',
          data: this.legendData,
          right: '0',
          textStyle: {
            color: '#8c9bd3'
          }
        },
        radar: {
          name: {
            formatter (name) {
              return name
            },
            color: '#8c9bd3'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(57, 121, 211, .5)'
            }
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(24, 61, 111, .4)', 'rgba(24, 61, 111, 0)']
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(57, 121, 211, .5)'
            }
          },
          indicator: [
            {name: '体温异常人次', max: this.max},
            {name: '需要加餐人次', max: this.max},
            {name: '需要服药人次', max: this.max},
            {name: '需要观察人次', max: this.max}
          ]
        },
        series: [{
          name: '雷达图',
          type: 'radar',
          label: {
            textStyle: {
              color: '#8c9bd3'
            }
          },
          itemStyle: {
            normal: {
              lineStyle: {
                width: 1
              },
              opacity: 0.2
            },
            emphasis: {
              lineStyle: {
                width: 2
              },
              opacity: 1
            }
          },
          data: this.series
        }]
      }
      $radar.setOption(option, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .radar
    width: 100%
    height: 100%
</style>
